<template>
  <div class="card">
    <h1>{{ userStore.$state.token }}</h1>
    <button type="button" @click="countAdd">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore } from '../stores/user';

// defineProps<{ msg: string }>()
const count = ref(0)
const userStore = useUserStore();
userStore.loadState();
console.log("userStore", userStore);
const countAdd = () => {
  userStore.setToken((count.value++).toString())
}
</script>
<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>
